<template>
	<view>
    <navbar></navbar>
		<view class="notice-list">
			<view v-for="(item,index) in list" :key="item.id" class="notice dis-flex flex-y-center">
				<view class="notice__img">
					<image :src="item.goods_image" mode="aspectFill"></image>
				</view>
				<view class="notice-info m-left30">
					<view class="m-top20 f-26 col-9">{{ item.goods_name }}</view>
					<view class="m-top20 f-26 col-3">{{ item.msg }}</view>
					<view class="m-top20 f-24 col-9">{{ item.create_time }}</view>
				</view>
			</view>
		</view>
		<view v-if="!loading && 0 == list.length">
			<view class="yoshop-notcont">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">暂无通知</text>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
  import navbar from "@/components/navbar/navbar";
	export default {
    components: {
      navbar
    },
		data() {
			return {
				page: 1,
				loading: true,
				hasMore: false,
				list: []
			}
		},
		onLoad() {
			this.requestData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.requestData();
			}
		},
		methods: {
			requestData(callback) {
				this.loading = true;
				uni.showLoading();
				app._get('lottery/noticeList', {
					page: this.page,
				}, (res) => {
					let {
						data,
						total
					} = res.data.list;
					let {
						page,
						list,
						hasMore
					} = this.$data;
					if (1 == page) {
						list.length = 0;
					}
					list = [...list, ...data];
					hasMore = total > list.length;
					if (hasMore) {
						page++;
					}
					this.page = page;
					this.list = list;
					this.hasMore = hasMore;
				}, null, () => {
					this.loading = false;
					uni.hideLoading();
					callback && callback();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.notice-list {
		background: #fff;
		padding: 0 20rpx;
	}

	.notice {
		height: 200rpx;
	}

	.notice:nth-child(n+2) {
		border-top: 1px solid #F6F6F5;
	}

	.notice-info {
		height: 100%;
		padding-top: 10rpx;
	}

	.notice__img {
		width: 109rpx;
		height: 155rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.notice__img image {
		width: 100%;
		height: 100%;
	}
</style>
